<template>
	<view style="padding-bottom: 138rpx;">
		<!-- <page-head ref="pageHead" :title="'森歌微商城-邀请有礼'" :headtype="2"></page-head> -->
		<view>
			<image class="img" src="/bundle/static/image/invite1.jpg" mode="widthFix" />
			<view class="popIntegral">{{yaoqingIntegral}}</view>
		</view>
		<view class="yqgzbox">
			<image class="yqgzimg" :src="popupimg" mode=""></image>
		</view>
		<image class="img" src="/bundle/static/image/invite2.jpg" mode="widthFix"/>
		<view style="position: relative;">
			<image class="img" src="/bundle/static/image/invite3.jpg" mode="widthFix"/>
			<image class="imgEmpty" v-if="fansList.length==0" src="/bundle/static/image/inviteEmpty.jpg" mode="widthFix"/>
			<view class="card-box" v-if="fansList.length>0">
				<view v-for="(item, index) in fansList" :key="index" class="card-item flex row-between bg-white p-20">
					<view class="flex">
						<u-image :src="item.avatar" border-radius="50%" width="80rpx" height="80rpx" />
						<view class="fans-info m-l-10">
							<view class="fans-name bold line-1">{{item.nickname}}</view>
							<view class="flex lighter m-t-20">
								<view style="font-size: 24rpx">{{item.create_time}}</view>
							</view>
						</view>
					</view>
					<view class="fr">
						<text class="fansTxt">{{item.fans_team}}人</text>
						<text class="fansTxt">{{item.fans_order}} 单</text>
						<text class="fansTxt">{{item.fans_money}} 元</text>
					</view>
				</view>
				<view class="lookMore">
					<router-link class="" :to="{path: '/bundle_b/pages/user_fans/user_fans'}">查看更多<uni-icons type="right" size="12" color="#823D32"></uni-icons>
					</router-link>
				</view>
			</view>
		</view>
<!-- 		<view class="yqgz" @click="$refs.popup.open('center')">邀请规则</view>
		<uni-popup ref="popup" type="center">
			<view class="popupbox">
				<view class="popuptitle">邀请规则</view>
				<view class="popuptext" v-html="popuptext"></view>
			</view>
		</uni-popup> -->
		<view class="down_nav">
			<view class="clearfix" style="padding: 0 24rpx;">
				<button class="navBtn fl" @click="apifun.navigate('/pages/mine/invite_fans')">生成邀请海报</button>
				<button class="navBtn navBgBtn fr" open-type="share">邀请好友</button>
			</view>
		</view>
		
	</view>
</template>

<script>
	import {
        mapGetters
    } from 'vuex'
    import {
        baseURL,
        basePath
    } from '@/config/app'
	import {
		copy
	} from '@/utils/tools.js'
	import {
		getUserFans,invitationText
	} from '@/api/user';
	import {
		apiDrawIntegral
	} from "@/api/store"
	export default {
		data() {
			return {
				popupimg:'',
				yaoqingIntegral:0,
				fansList: []
			}
		},
		onLoad() {
			//this.$refs.pageHead.getTopHeight()
			this.getUserFans()
			this.apiDrawIntegral()
			this.getinvitationText()
		},
		computed: {
            ...mapGetters(['inviteCode', 'userInfo']),
            link() {
                return `${baseURL}${basePath}?invite_code=${this.inviteCode}`
            }
        },
		methods: {
			async getinvitationText(){
				console.log(333)
				const {
					code,
					data
				} = await invitationText({})
				if (code == 1) {
					this.popupimg = data.content
					console.log(3332)
				}
			},
			async apiDrawIntegral(){
				const {
					code,
					data
				} = await apiDrawIntegral({})
				if (code == 1) {
					this.yaoqingIntegral = data[0]
				}
			},
			onCopy(text) {
				copy(text)
			},
			getUserFans(){
				getUserFans({
					page_size:3,
					page_no:1
				}).then(({
					data
				}) => {
					this.fansList = data.list;
				}).catch(() => {
					
				})
			},
			
		},
		onShareAppMessage() {
			 return {
		      title: '森歌官方商城',
		      path: `/pages/index/index?invite_code=${this.inviteCode}`
		    }
		},
	}
</script>

<style lang="scss">
	page{
		padding-bottom: 0!important
	}
.img{
	display:block;
	width: 100%;
}
.popIntegral{
	width: 100%;
	text-align: center;
	position: absolute;
	left: 0;
	top: 280rpx;
	font-size:96rpx;
	text-indent: -30rpx;
	color: #FFDB80;
	z-index: 99;
}
.down_nav{
	width: 100%;
	height: 138rpx;
	background-color: #fff;
	position: fixed;
	bottom: 0;
	z-index:10
}
.navBtn{

	display: inline-block;
	margin-top: 20rpx;
	width: 340rpx;
	height: 78rpx;
	text-align: center;
	font-size: 31rpx;
	font-weight: 400;
	color: #F7301B;
	line-height: 78rpx;
	background: #FFFFFF;
	border: 1px solid #F8341C;
	border-radius: 39rpx;
}
.navBgBtn{
	color: #FFF;
	border: 1px solid #F8341C;
	background: #F8341C;
}
.imgEmpty{
	width: 350rpx;
	z-index: 9;
	position: absolute;
	top: 160rpx;
	left: 200rpx;
}
.card-box {
	width: 650rpx;
	position: absolute;
	top: 160rpx;
	left: 54rpx;
	z-index: 9;
		.card-item {
			width: 640rpx;
			.fans-name {
				width: 200rpx;
			}
			&:not(:last-of-type) {
				border-bottom: $-solid-border;
			}
		}
	}
	.fansTxt{
		margin-left: 20rpx;
		font-size: 22rpx;
		color: #9D5547;
	}
	.lookMore{
		font-size: 22rpx;
		color: #6C2115;
		margin: 30rpx auto;
		text-align: center;
	}
	.yqgz{
		z-index: 10;
		position: fixed;
		top: 570rpx;
		right: 0;
		background-color: #ff835a;
		color:#fff;
		padding: 10rpx 20rpx;
		border-radius: 40rpx 0 0 40rpx;
	}
	.popupbox{
		background-color: #fff;
		margin: 0 50rpx;
		padding: 40rpx;
		border-radius: 14rpx;
	}
	.popuptitle{
		text-align: center;
		font-weight: bold;
		font-size: 30rpx;
		margin-bottom: 30rpx;
	}
	.yqgzbox{
		padding: 0 20rpx;
		background: linear-gradient(to right,#c486e8,#fe7d81);
		padding-bottom: 20rpx;
		box-sizing: border-box;
	}
	.yqgzimg{
		margin-top: -70rpx;
		width: 100%;
		height: 764rpx;
		
	}
</style>
